<template>
  <div class="chartPolicyMatch fl pr">
    <h4 class="chartTitle pa">政策匹配统计</h4>
    <div id="chartPolicyMatch" style="width: 100%;height: 344px;"></div>
  </div>
</template>

<script>
  import { postAjax, getAjax } from "../../../api/api.js";
  import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      policyData:[],
      enterpriData:[]

//      charts: "",
//      datas:[96.3,96.4,97.5,95.6,98.1,94.8,89.6,94.1,80.1,52.4],
//      xData: ['人民政府', '科技系统', '发改体系', '人社体系', '财政系统', '商务系统', '农业系统','工信系统', '水利系统', '税务系统']
    };
  },
  methods: {
    //获取类型数量
    getTypeCount(){
//      this.$Loading.start();
      getAjax('/policyInfo/getTypeCount')
        .then((response) => {
          if(response.data.code === 0){
//            this.$Loading.finish();
            this.datas = [];
            let _this = this
            response.data.obj.forEach(element => {
              _this.policyData.push(element.value);
              _this.enterpriData.push(element.matchcount);
            });
            console.log( _this.policyData);
            this.Pie("chartPolicyMatch");
          }else {
            this.$Loading.error();
            this.$Message.warning("数据请求异常")
          }
        })
    },
    //图表配置
    Pie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['各类型政策数量', '各类型匹配企业数量'],
          left: 200,
          top: 20,
          textStyle: {
            color: "#333",
            fontSize: '14'
          },
          itemGap: 70
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top:'20%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['项目申报类',
            '资质认定类',
            '财税奖补类'
          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 14,
            color: '#333'
          }
        }],
        yAxis: [{
          type: 'value',
          axisLabel: {
            formatter: '{value} %'
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
              width: 1,
              type: "solid"
            },
          },
          splitLine: {
            lineStyle: {
              color: "#ccc",
            }
          },
          axisLabel: {
            fontSize: 14,
            color: '#333'
          }
        }],
        series: [{
          name: '各类型政策数量',
          type: 'bar',
          data: this.policyData,
          barWidth: 40, //柱子宽度
          barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              color: '#96c935',
              label: {
                show: true,
                position: 'top',
                formatter: '{c}',
                color: '#333',
                fontSize: 14
              }
            }
          }
        }, {
          name: '各类型匹配企业数量',
          type: 'bar',
          data:this.enterpriData,
          barWidth: 40,
          barGap: 0.02,
          itemStyle: {
            normal: {
              color: '#fba259',
              label: {
                show: true,
                position: 'top',
                formatter: '{c}',
                color: '#333',
                fontSize: 14
              }
            }
          }
        }]
      });
    }
  },
  //调用
  mounted() {
    this.$nextTick(function() {
      this.Pie("chartPolicyMatch");
    });
    this.getTypeCount();
  }
};
</script>
<style>
  .chartTitle{
    color: #333;
    top:15px;
    left:20px;
    font-size: 16px;
    display: inline-block;
    font-weight: bold;
  }

</style>
